<template>
  <div class="page">
    <c-title text="群拓客"></c-title>

    <div class="header-info">
      <van-sticky :offset-top="40" z-index="10" @change="stickyChange">
        <div class="header-tabs" :class="stickyShow?'':'sticky-pg'">
          <van-tabs 
            v-model="active" 
            @change="setTabIndex" 
            color="#FE5E56"
            :title-active-color="'var(--themeBaseColor)' || '#F15353'"
            line-width="15px"
            :color="'var(--themeBaseColor)' || '#F15353'">
            <block v-for="(item,index) in tabsArr" :key="index">
              <van-tab :title="item.name" :name="item.status" title-style="font-size:15px" ></van-tab>
            </block>
          </van-tabs>
        </div>
      </van-sticky>
      <div class="user-container">
        <div class="user-info">
          <div class="user-customer flex-a-c">
            <!--flex-a-c flex-j-c-->
            <div class="circle "  v-if="employee && employee.member">
              <van-image
                  round
                  width="45px"
                  height="45px"
                  :src="employee.member.avatar_image"
                />
            </div>
            <h3 v-if="employee && employee.member">{{ employee.member.nickname }}</h3>
          </div>
          <div class="user-infoList flex"  v-if="tabIndex == 0 && employee != null">
            <div class="info-item flex-a-c "  v-for="(item,index) in employeeData" :key="index">
              <div class="info-num">{{item.value}}</div>
              <div class="info-desc">{{item.desc}}</div>
              <div class="other-Info" v-if="item.otherInfo">{{ item.otherInfo }}</div>
            </div>
          </div>
          <div class="user-infoList flex"  v-if="tabIndex == 1 && owner != null">
            <div class="info-item flex-a-c "  v-for="(item,index) in ownerData" :key="index">
              <div class="info-num">{{item.value}}</div>
              <div class="info-desc">{{item.desc}}</div>
              <div class="other-Info" v-if="item.otherInfo">{{ item.otherInfo }}</div>
            </div>
          </div>
          <div class="user-msak"></div>
          <div class="msak-staff">
            <img :src="memberImg['member']" alt="" v-show="tabIndex == 1" />
            <img :src="memberImg['staff-bg']" alt="" v-show="tabIndex == 0" />
          </div>
        </div>
        <div class="history" v-if="tabIndex == 1 && owner != null">
          <div class="flex-j-sb flex-a-c history-head">
            <div class="history-title">历史记录</div>
            <div class="history-time" @click="datetimePopup = true">{{ currentTimeText }}<i style="margin-left: 0.4rem;" class="iconfont icon-member-bottom"></i></div>
          </div>
          <div class="history-wrapper">
            <line-echarts id="gdu_index1" :charts="lineCharts"></line-echarts>
          </div>
        </div>
        <div class="user-lock">
          <van-tabs 
            v-model="lockActive" 
            @change="setChildTabIndex" 
            color="#FE5E56"
            v-if="tabIndex == 0"
            :title-active-color="'var(--themeBaseColor)' || '#F15353'"
            line-width="15px"
            :color="'var(--themeBaseColor)' || '#F15353'">
            <block v-for="(item,index) in lockTabsArr" :key="index">
              <van-tab :title="item.name" :name="item.status" title-class="lock-size" ></van-tab>
            </block>
          </van-tabs>
          <van-tabs 
            v-model="memberActive" 
            @change="setChildTabIndex" 
            color="#FE5E56"
            v-if="tabIndex == 1"
            :title-active-color="'var(--themeBaseColor)' || '#F15353'"
            line-width="15px"
            :color="'var(--themeBaseColor)' || '#F15353'">
            <block v-for="(item,index) in memberTabs" :key="index">
              <van-tab :title="item.name" :name="item.status" title-class="lock-size"></van-tab>
            </block>
          </van-tabs>
          <div :class="childTabIndex == 4?'flex-a-c flex-j-sb':''">
            <div :class="childTabIndex == 4?'search-box':''">
              <van-search  placeholder="搜索群" shape="round" v-model="searchText" @search="getListData" />
            </div>
            <div class="flex-j-sb">
              <template v-if="tabIndex == 1 && childTabIndex == 4">
                  <van-search  v-model="searchMemberName"  :class="childTabIndex == 4?'search-box':''"  shape="round" @search="getListData" placeholder="搜索会员昵称" >
                  </van-search>
                  <div class="flex-a-c">
                    <div class="child-search"  @click="getListData">搜索</div>
                  </div>
              </template>
            </div>
            
          </div>
          <div class="filter-wrapper" v-if="tabIndex == 1 && childTabIndex == 4">
            <!-- 邀请会员筛选 -->
            <div class="filter-btn" @click="filterPopup = true">筛选<i class="iconfont icon-fontclass-shaixuan1"></i></div>
            <div 
              class="select-filter-item flex-a-c" 
              v-for="(value, key, index) in filterConfig" 
              :key="index" 
              @click.stop="delFilter(key)">{{ value.name }}<i class="iconfont icon-icon_close"></i></div>
          </div>
          
          <div class="lockGroup-list">
            <block v-for="(item,index) in listData" :key="index">
              <group-item 
                :item="item" 
                :index="index" 
                :share="tabIndex == 0 ? true : false"
                :level="tabIndex"
                :childTabIndex="childTabIndex"
                @handQrcode="showQrcode">
                <template v-slot:content v-if="childTabIndex == 4">
                  <div class="group-member invite-pb flex-a-c" >
                    <h3>群昵称：{{ item.group_name }}</h3> 
                  </div>
                  <div class="group-member flex-a-c" >
                    <h3>加入时间：{{ item.join_time_str }}</h3> 
                  </div>
                  <div class="status flex">
                    <template v-if="item.is_bind_business">
                       <!-- is_bind_business: 是否绑定平台的群 0不是 1是，当不是绑定平台的群时，粉丝和新会员标签不显示 -->
                      <div class="status-tag" v-if="item.is_fans == 1">粉丝</div>
                      <div div class="status-tag" >{{ item.is_old == 0 ? "新会员" : "老会员" }}</div>
                    </template>
                    <div class="status-tag">{{ item.join_scene == 1 ? "直接邀请" : item.is_old == 2 ? "邀请链接" : "扫描入群" }}</div>
                    <div class="status-tag">{{ item.status == 1 ? "在群" : "退群" }}</div>
                  </div>
                </template>
              </group-item>
              
            </block>
          </div>
        </div>
      </div>
      
    </div>

    <qrcode :show.sync="qrcodePopup" :img="qrcodeImg"></qrcode>

    <van-popup v-model="datetimePopup" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="confirmTime" />
    </van-popup>

    <van-popup v-model="filterPopup" position="bottom"  round>
      <filterPopup ref="filterPopup" v-on:confirm="confirmFilter" @filterClose="closeFilterPop" :coThemeColor="coThemeColor"></filterPopup>
    </van-popup>

    <share-poster :pid="posterID" v-model="sharePopup" :img="qrcodeImg"></share-poster>
  </div>
</template>

<script>
import gduIndexController from "./gdu_index_controller";

export default gduIndexController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-tabs__line {
  bottom:1.1875rem;
}
.user-lock ::v-deep .van-tabs__nav {
  background: transparent;
}
.user-lock ::v-deep  .lock-size {
  font-size: 0.8125rem;
  // justify-content: flex-start;
}
.user-lock ::v-deep .van-tab--active {
  font-weight: bold;
  font-size: 0.875rem;
}
.user-lock ::v-deep .van-tabs__nav--line {
  padding-bottom: 0.625rem;
}

.user-lock ::v-deep .van-search__content {
  background: #FFFFFF;
}
.user-lock ::v-deep .van-search {
  margin:0.625rem 0 0.625rem 0;
  border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
  padding:0;
}

.header-info {
  background-color: #f5f5f5;
  position: relative;
}
.header-tabs {
  background-color: #fff;
  
}
.sticky-pg {
  padding:0 0 1.375rem 0;
}
.user-lock {
  padding:0 0.75rem;
  .group-member {
    text-align: left;
    padding:0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #6E6E79;
    h3 {
      padding:0 0.5rem 0 0;
      font-weight: 500;
    }
    p {
      font-size: 0.8125rem;
      color: #6E6E79;
      padding:0 0 0 0.25rem;
    }
  }
  
  .status {
    padding:0.4375rem 0 0 0;
    flex-wrap: wrap;
    .status-tag {
      font-weight: 400;
      font-size: 0.6875rem;
      color: #6E6E79;
      padding:0.1875rem 0.375rem;
      background: #F5F5F5;
      border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
      margin:0 0.5rem 0 0;
      &:nth-child(n + 5) {
        margin-top: 0.625rem;
      }
    }
  }
}
.search-box {
  width: 9.0625rem;
  min-width: 9.0625rem;
}
.search-member {
  width:12.5rem;
}

.child-search {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #FFFFFF;
  background: var(--themeBaseColor);
  border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
  padding:0.625rem 0.8125rem;
  min-width:3.1875rem;
  box-sizing: border-box;
  margin: 0 0 0 0.3125rem;
}
//新的样式
.user-info {
  margin:-1.25rem 0 2.75rem 0 ;
  padding:1.25rem 0.75rem 0 0.75rem;
  background: linear-gradient( 128deg, #EAF1F1 0%, #DEEBF9 100%);
  
  border-radius:1.875rem 1.875rem 1.875rem 1.875rem;
  height: 13.375rem;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  .user-msak {
    width:100%;
    height: 10.625rem;
    background: linear-gradient( 180deg, rgba(245,245,245,0) 0%, #F5F5F5 42%, #F5F5F5 100%);
    top:2.75rem;
    left:0;
    position: absolute;
    z-index: 1;
  }
  .msak-staff {
    position: absolute;
    z-index: 1;
    width: 8.0625rem;
    height: 4.0625rem;
    right:1.625rem;
    top:0.375rem;
    img {
      width:100%;
      height: auto;
      display: block;
    }
  }
  .user-customer {
    padding:0 0 1.25rem 0;
    .circle {
      width: 3rem;
      height: 3rem;
      background-color: #fff;
      border-radius: 50%;
      margin:0 0.625rem 0 0;
      padding:0.0625rem 0.125rem;
    }
    h3 {
      font-weight: bold;
      font-size: 1.125rem;
      color: #00001C;
    }
  }
  .user-infoList {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    flex-wrap: wrap;
    padding:1.0625rem 0 1rem 0;
    gap: 1.375rem 0rem;
    z-index: 2;
    position: relative;
    // margin: 0 0 0.625rem 0;
    .info-item {
      width:33.33%;
      flex-direction: column;
     
      .info-num {
        font-weight: bold;
        font-size: 1.125rem;
        color: #00001C;
      }
      .info-desc {
        font-size: 0.75rem;
        color: #00001C;
      }
      .other-Info {
        font-size: 0.625rem;
        padding:0.125rem 0 0 0;
        color: #6E6E79;
      }
    }
  }
}




.history {
  width: calc(100% - 1.5rem);
  box-sizing: border-box;
  margin: -0.625rem 0.75rem 0rem 0.75rem;
  background-color: #fff;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  // border-bottom: 10px solid #eff0f1;
  .history-head {
    padding: 0.9375rem 0.75rem 0.75rem 0.75rem;
  }
  .history-title {
    font-size: 1rem;
    text-align: left;
    font-weight: bold;
    color: #17243e;
  }

  .history-time {
    display: inline-flex;
    padding: 0.3125rem 0.5625rem;
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border: 0.0625rem solid #D6D6DC;
  }

  .history-wrapper {
    padding: 0 0.875rem 0.906rem;
    min-height: 10rem;
  }
}

.filter-wrapper {
  padding: 0.25rem 0rem 0.9375rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .filter-btn {
    display: flex;
    align-items: flex-end;
    margin-right: 0.625rem;
  }

  .select-filter-item {
    position: relative;
    font-size: 0.75rem;
    color: #6E6E79;
    background: #FFFFFF;
    border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
    padding:0.25rem 0.375rem;
    margin:0 0.5rem 0rem 0;
    .icon-icon_close {
      font-size: 0.75rem;
      padding:0 0 0 0.625rem;
    }
  }

  .select-filter-item:nth-child(n + 5) {
    margin-top: 0.625rem;
  }
}
</style>
